import {EchartLayer} from "../echartLayer/EchartLayer";

export const PointAttack = class {
  _mapId = null;
  _chart = null;
  _option = null;

  constructor(mapId, windData) {
    this._mapId = mapId;
    this._option = {
      tooltip: {
        trigger: "item",
        backgroundColor: "#1540a1",
        borderColor: "#FFFFCC",
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: "z-index:100",
        formatter: function (params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = "";
          var name = params.name;
          var value = params.value[params.seriesIndex + 1];
          res =
            "<span style='color:#fff;'>" +
            name +
            "</span><br/>数据：" +
            value;
          return res;
        }
      },
      visualMap: {
        //图例值控制
        show: false,
        type: 'piecewise',
        pieces: [{
          max: 80,
          color: 'red'
        },
          {
            min: 80,
            max: 120,
            color: 'yellow'
          },
          {
            min: 120,
            color: 'green'
          }
        ],
        calculable: true,
      },
      series: []
    };
  }
  render(){
    this._chart = new EchartLayer(this._mapId, this._option);
  }
  /**
   *   [
       {//start
        coord: [x, y],
         value: 10
       },
        {//end
        coord: [x, y]
       }
     ]
   * @param data
   */
  addLines(data) {
    this._option.series.push(
      {
        coordinateSystem: "arcgis",
        type: "lines",
        zlevel: 2,
        large:false,//是否启用大规模线图的优化，在数据图形特别多的时候（>=5k）可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。缺点：优化后不能自定义设置单个数据项的样式，不能启用 effect。
        largeThreshold:2000,//开启绘制优化的阈值。
        effect: {//线特效的配置
          show: true,
          // color: "#0bc7f3",
          period: 4, //特效动画的时间，单位为 s。
          delay:0,//特效动画的延时，支持设置成数字或者回调。单位ms
          constantSpeed:0,//配置特效图形的移动动画是否是固定速度，单位像素/秒，设置为大于 0 的值后会忽略 period 配置项。
          trailLength: 0.02, //特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
          symbol: "arrow", //特效图形的标记。
          symbolSize: 5, //特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
          loop:true,//是否循环显示特效
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 0, //尾迹线条透明度
            curveness: 0.3 //尾迹线条曲直度
          }
        },
        data: data
      }
    )
  }

  /**
   * [
   *   {
   *    name:"名称",
   *    value:[x,y,v],}
   * ]
   * @param data
   */
  addEffectScatter(data) {
    this._option.series.push({//涟漪点位特效
      type: "effectScatter",
      coordinateSystem: "arcgis",
      zlevel: 2,
      rippleEffect: {
        //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: "stroke", //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: "right", //显示位置
          offset: [5, 0], //偏移设置
          formatter: "{b}" //圆环显示文字
        },
        emphasis: {
          show: true,
          color: "#FF6A6A"
        }
      },
      symbol: "circle",
      symbolSize: function (val) {
        return 8 + val[2] / 1000; //圆环大小
      },
      itemStyle: {
        normal: {
          show: true,
        },
        emphasis: {
          show: true,
          color: "#FF6A6A"
        }
      },
      data: data
    })
  }
  /**
   * [
   *   {
   *    name:"名称",
   *    value:[x,y,v],}
   * ]
   * @param data
   */
  addScatter(data) {
    this._option.series.push({//被攻击点标绘
      type: "scatter",
      coordinateSystem: "arcgis",
      zlevel: 2,
      rippleEffect: {
        period: 4,
        brushType: "stroke",
        scale: 4
      },
      label: {
        normal: {
          show: true,
          color: "red",
          position: "right",
          formatter: "{b}",
        },
        emphasis: {
          show: true,
          color: "#FF6A6A"
        }
      },
      symbol: "pin",
      symbolSize: 30,
      itemStyle: {
        normal: {
          show: true,
          color: "red",
        },
        emphasis: {
          show: true,
          color: "#FF6A6A"
        }
      },
      data: data
    })

  };

  addHeatMap(data){
    this._option.series.push({
      name: 'AQI',
      type: 'heatmap',
      coordinateSystem: 'arcgis',
      data:data
    })
  }
}


function convertData(data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var dataItem = data[i];
    var fromCoord = geoCoordMap[dataItem[0].name];
    var toCoord = geoCoordMap[dataItem[1].name];
    if (fromCoord && toCoord) {
      res.push([{
        coord: fromCoord,
        value: dataItem[0].value
      },
        {
          coord: toCoord,
        }
      ]);
    }
  }
  console.log("convertData",JSON.stringify(res))
  return res;
};
